<template>
  <div ref="slideTable" class="table">
    <el-table
      ref="table"
      v-loading="loading"
      :data="tableData"
      style="width:100%"
      stripe
      border
      :max-height="maxHeight"
    >
      <Column v-for="(column,index) in tableColumn" :key="index" :prop="column.prop" :label="column.label" :sortable="column.sortable" :min-width="column.minWidth" :width="column.width" :align="column.align" />
      <div slot="append" class="seeMore">
        <div v-if="!noMore&&tableData.length>0" @click="loadMoreData">点击加载更多</div>
        <div v-if="noMore&&tableData.length>0">没有更多了～</div>
      </div>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    tableColumn: {
      type: Array,
      default: () => []
    },
    tableData: {
      type: Array,
      default: () => []
    },
    noMore: {
      type: Boolean,
      default: false
    },
    maxHeight: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: false
    }
  },
  methods: {
    stopLoad() {
      this.loading = false
    },
    loadMoreData() {
      this.loading = true
      this.$emit('loadMoreData')
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-table__body-wrapper{
  overflow-y: auto;
}
/deep/ .has-gutter{
    background-color: unset !important;
}
/deep/ .el-table th.el-table__cell>.cell {
    color: #999999;
}
/deep/ .el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell {
    border-bottom: 1px solid #ECECEC !important;
}
.seeMore{
    cursor: pointer;
    text-align: center;
    color: #999999;
    line-height: 50px;
    height: 50px;
}
</style>

